Design for Internationalization 為國際化而設計
1 為國際化設計時預留空間 Leave room for longer translations
國際化設計中最常見的問題之一是沒有為多語言翻譯預留足夠空間。
英文的 “New!” 只有 4 個字元（包括感嘆號），但法語中是 “Nouveau !”，共 9 個字元，而且感嘆號前還需要空格（這是法語標點的標準格式）。這意味著，法語翻譯的長度是英文的兩倍多。如果設計時未預留足夠空間，翻譯後可能會導致文字重疊或被截斷，嚴重影響介面可讀性與美觀性。
一個標籤樣式的 UI，在英文時文字剛好合適，但換成法語後，文字看起來“擠在一起”，顯示擁擠。“Uh-oh. It’s feeling a little cramped in here.”（這裡有點擁擠了）
Google Spreadsheets 編寫了一個簡單工具，利用GoogleTranslate函式，快速檢視一段文字在多種語言下的翻譯。這樣可以在早期估算文字長度，提前最佳化排版設計。
Google Excle 工具連結
IBM 的全球化設計網站也提供了一個翻譯長度參考表，列出各語言相對於英文平均增長的字元比例。例如：德語：+30%法語：+20%西班牙語：+25%。這類參考表可以幫助設計師科學預留文字空間，避免上線後問題頻發。
2 避免將文字放在狹窄的列中Avoid putting text in narrow columns
列布局能讓介面更有條理，結構清晰，並配合網格系統保持視覺平衡。但當文字長度因翻譯而變得不可預測時，原本精美的佈局可能會被打亂。
翻譯導致換行斷裂，當文字放在過窄的列中，翻譯後的內容往往變長，導致：
- 原本單行的標題變成了兩行或三行
- 列間距不夠，出現重疊或換行不規則
- 整個版式結構失衡，使用者閱讀受阻
原設計採用左右對稱的列布局，但在翻譯後，左邊文字變多，導致高度不一致，整體觀感變差。
儘量使用較寬的橫向佈局，而非豎向窄列。在佈局中為內容預留“增長餘地”，適應不同語言長度變化。這樣即使翻譯後的文字變長，也能自動調整而不破壞介面結構，從而提升國際使用者體驗的一致性。
3 不要將文字嵌入圖片Don’t embed text in images
如果你在圖片中直接嵌入文字，那麼當需要翻譯成多語言時，會變得非常麻煩。
翻譯人員雖然可以在 Photoshop 或 Sketch 中單獨翻譯文字圖層，但每種語言的長度不同，導致每個版本都可能需要手動調整佈局，增加維護成本。
使用線條代替文字：有時候並不一定需要真實的單詞，模糊的線條、圖形就能傳達基本資訊。
用 CSS 覆蓋新增文字：將文字作為影象上的浮層新增，而不是直接畫在圖中。一個綠色圓圈中看似有文字“Get started”，實際上這段文字是透過 CSS 新增在圖片上方的，這樣翻譯只需更改文字，不必重新設計整張圖。
4 不要用 UI 元素拼接完整句子Don’t create sentences with UI elements
很多設計師會隨意移動輸入框、下拉選單等 UI 元素以最佳化佈局，但如果這些元素是句子的一部分，國際化時就會遇到一連串麻煩。
- 詞序問題（Word order）：語言的語序各不相同。例如英文的“Buy 3 shirts”翻譯成日語時，“Buy”通常會在句末。如果按鈕、下拉框是嵌在句子中，翻譯後的順序可能完全錯亂。
- 複數變化（Pluralization）：英文中複數較簡單，如“1 picture”和“5 pictures”，但俄語可能有三種不同形式，具體取決於數字。若 UI 元素中嵌入數字欄位，句子可能因語法不一致而出錯。
- 性別變化（Gender）：某些語言有性別區分，例如法語中“large”可根據語法變為“grand”、“grande”、“grands”或“grandes”。當句中使用下拉選單選擇物件時，可能造成語法錯誤。
上圖展示了一個句子：“You selected [dropdown] item(s).”
如果把“item(s)”設為可變部分，翻譯時會因數量、性別、語序不同導致句子出錯。
將 UI 元素從句子中獨立出來，使其成為一段文字的補充而不是嵌入成分。把“Select quantity”作為獨立標籤，下方再展示數字選擇器，邏輯清晰，避免翻譯風險。
5 小心使用比喻性圖形Watch out for metaphors
產品設計中常使用比喻（Metaphor）來傳達資訊，如：
- 資料夾圖示比喻實際的資料夾
- 拖拽操作模擬“用手搬動物品”
- Dropbox 的“箱子”圖示象徵儲存空間, 典型的美式郵箱——帶小紅旗。但多數國家並沒有類似設計，因此使用者可能無法識別其含義。
- 貓頭鷹比喻差異：在美國，貓頭鷹象徵智慧；但在芬蘭或印度，它可能象徵愚蠢。
在使用圖示、插畫前，先請國際化團隊審查比喻是否適用於各地文化。尤其是在全球平臺上，謹慎選擇通用或中性的設計更為穩妥。
6 使用具描述性的功能命名Use descriptive feature names
出於營銷目的，團隊可能會起一些俏皮、有趣的功能名稱以吸引使用者。但這類名字往往難以翻譯，而且可能在其他語言中完全沒有意義。
Dropbox 曾推出一個功能，允許使用者檢視檔案的歷史版本，名稱是 “Packrat”，旁邊還搭配了一隻小老鼠的圖示。對美國使用者可能很有趣，但對其他文化背景的使用者卻毫無意義，甚至可能引起困惑。後來 Dropbox 將功能更名為 “Extended version history”（擴充套件版本歷史），這個描述清晰、準確、易翻譯。
建議：
- 使用清晰描述性的名稱（如 “共享連結”、“自動同步”）
- 避免文化特定梗或語言遊戲
- 名稱越清楚，翻譯越順暢，使用者也更容易理解功能本質
7 為翻譯提供可替代選項Provide alternates for translation
國際化文案理想風格：精準、清晰、語義中性，便於翻譯團隊準確理解。但在品牌宣傳、趣味設計等場景，可能需使用更具創意的表達，此時應為翻譯人員提供"備用選項"。
實踐方法：為翻譯準備雙版本
在 Dropbox 為貼紙標籤命名時，團隊選用了“OMG cat”這個俏皮名稱，想表達“驚訝貓咪”的感覺。
在翻譯檔案中新增註釋，說明"OMG cat"可翻譯為"Surprised cat"（驚訝貓），讓翻譯人員根據文化場景選擇合適表達。若某語言無法傳達"OMG"情緒，可用"驚訝貓"的字面表達保留原意。